<template>
  <div>
    <el-form inline size="mini">
      <el-form-item label="年度:">
        <el-select v-model="filter.year" style="width: 80px">
          <el-option
            v-for="item in options.year"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="适用范围:">
        <el-select
          v-model="filter.office"
          placeholder="适用范围"
          style="width: 110px"
        >
          <el-option
            v-for="item in options.office"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-collapse-transition>
      <el-table
        v-if="!loading && exercisesDataFiltered.length > 0"
        :data="exercisesDataFiltered"
        :show-header="false"
        width="100%"
      >
        <el-table-column>
          <template slot-scope="scope">
            <div style="margin-bottom: 6px">{{ scope.row.title }}</div>
            <div>
              <el-tag type="danger" style="margin-right: 6px" size="mini">{{
                scope.row.office
              }}</el-tag>
              <el-tag type="info" style="margin-right: 6px" size="mini"
                >{{ scope.row.year }}年度</el-tag
              >
              <el-tag type="info" style="margin-right: 6px" size="mini"
                >第{{ scope.row.cycle }}期</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column width="60px" align="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              circle
              icon="el-icon-plus"
              @click="$emit('create', scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty
        v-else
        :description="filter.office == '' ? '请先选择适用范围' : '未找到可用练习'"
      >
        <div v-if="filter.office == ''">
          <el-button
            type="primary"
            size="mini"
            @click="filter.office = '管制一室'"
            >管制一室</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="filter.office = '管制二室'"
            >管制二室</el-button
          >
        </div>
      </el-empty>
    </el-collapse-transition>
  </div>
</template>

<script>
import { format } from "@/utils/datetime.js";
export default {
  name: "exerciseTable",
  props: { loading: { type: Boolean, required: true } },
  data() {
    return {
      options: {
        year: [
          new Date().getFullYear() - 1,
          new Date().getFullYear(),
          new Date().getFullYear() + 1,
          "全部",
        ],
        office: ["管制一室", "管制二室", "全部"],
      },
      filter: {
        year: new Date().getFullYear(),
        office: "",
      },
    };
  },
  computed: {
    exercisesData() {
      return this.$store.state.exercisesValid;
    },
    exercisesDataFiltered() {
      if (
        !this.exercisesData ||
        this.exercisesData.length == 0 ||
        !(this.exercisesData instanceof Array)
      ) {
        return new Array();
      } else {
        return this.exercisesData
          .filter(
            (item) =>
              (this.filter.office == "全部" ||
                item.office == this.filter.office ||
                (this.filter.office != "" && item.office == "终端管制室")) &&
              (this.filter.year == "全部" || item.year == this.filter.year)
          )
          .sort((a, b) => b.updateTime - a.updateTime);
      }
    },
  },
  methods: {
    dateFormat: format,
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
.el-divider {
  margin: 12px 0 0 0;
}
</style>
